<template>
  <div class="big-screen-bg">
    <div class="top-bg">
      <h2 @click="onrouter()">湖南省工业设计创新云平台</h2>
    </div>
    <div class="map-box">
      <div class="map_left">
        <div class="ranking_box">
          <div class="title">
            <h2>工业设计类别</h2>
          </div>
          <div class="ranking_list border">
            <div class="top_left"></div>
            <div class="top_right"></div>
            <div class="bottom_left"></div>
            <div class="bottom_right"></div>
            <ul>
              <li v-for="(item,index) in rankingList" :key="index">
                <!--<b>{{ index+1 }}</b>-->
                <h6>{{ item.name }}</h6>
                <p><span :style="{width:item.proportion}"></span></p>
                <!-- <code>{{ item.proportion }}</code>-->
              </li>
            </ul>
          </div>
          <div class="title" style="margin-top: 10px;">
            <h2>专利数</h2>
          </div>
          <div class="patent border">
            <div class="top_left"></div>
            <div class="top_right"></div>
            <div class="bottom_left"></div>
            <div class="bottom_right"></div>
            <div class="patentEcharts" id="patentEcharts"></div>
          </div>
          <div class="title" style="margin-top: 10px;">
            <h2>工业设计专业人员</h2>
          </div>
          <div class="design_box border">
            <div class="top_left"></div>
            <div class="top_right"></div>
            <div class="bottom_left"></div>
            <div class="bottom_right"></div>
            <designEcharts></designEcharts>
          </div>
        </div>
      </div>
      <div class="map_center">
        <Map></Map>
      </div>
      <div class="map_right">
        <div class="title">
          <h2>企业属性</h2>
        </div>
        <div class="enterprise border">
          <div class="top_left"></div>
          <div class="top_right"></div>
          <div class="bottom_left"></div>
          <div class="bottom_right"></div>
          <enterpriseEchars></enterpriseEchars>
        </div>
        <div class="title" style="margin-top: 10px;">
          <h2>工业设计获奖情况</h2>
        </div>
        <div class="enterprise border canvas">
          <div class="top_left"></div>
          <div class="top_right"></div>
          <div class="bottom_left"></div>
          <div class="bottom_right"></div>
          <awardsEchars></awardsEchars>
        </div>
        <div class="title" style="margin-top: 10px;">
          <h2>学术资源统计</h2>
        </div>
        <div class="enterprise border">
          <div class="top_left"></div>
          <div class="top_right"></div>
          <div class="bottom_left"></div>
          <div class="bottom_right"></div>
          <div class="resourceEchars" id="resourceEchars"></div>
        </div>
      </div>
    </div>
    <div class="map_bottom"></div>
  </div>
</template>

<script>
import Map from './map'
import designEcharts from './designEcharts'
import enterpriseEchars from './enterpriseEchars'
import awardsEchars from './awardsEchars'
export default {
  components:{ designEcharts,Map,enterpriseEchars,awardsEchars },
  data(){
    return {
      rankingList:[
        {
          name:'机械设计',
          proportion:'80%'
        },
        {
          name:'电路设计',
          proportion:'70%'
        },
        {
          name:'造型设计',
          proportion:'68%'
        },
        {
          name:'环境规划',
          proportion:'65%'
        },
        {
          name:'服装设计',
          proportion:'55%'
        }
      ]
    }
  },
  mounted(){
    this.patentEchartsInit();
    // this.awardsEcharsInit();
    this.resourceEcharsInit();
  },
  methods:{
    //专利数
    patentEchartsInit(){
      const myChart = this.$echarts.init(document.getElementById("patentEcharts"));
      let option;
      option = {
        tooltip: {
          showContent: true,
          trigger: 'axis',
          backgroundColor: 'rgba(8,36,68,.7)',
          color: '#fff',
          textStyle: {
            color: '#fff'
          },
        },
        textStyle: {
          "color": "#c0c3cd",
          "fontSize": 14
        },
        legend: {
          top: "10%",
          right:"4%",
          "itemWidth": 13,
          "itemHeight": 13,
          "icon": "rect",
          "padding": 0,
          textStyle: {
            "color": "#c0c3cd",
            fontSize: 13,
            "padding": [2, 0, 0, 0]
          }
        },
        grid: {
          top: '23%',
          left: '14%',
          bottom: '25%',
          right: '10%'
        },
        xAxis: {
          nameTextStyle: {
            "color": "#c0c3cd",
            "padding": [0, 0, -10, 0],
            "fontSize": 14
          },
          axisLabel: {
            interval: 0,
            rotate: '0',
            textStyle: {
              color: '#fff' //坐标轴字颜色
            },
            margin: 15
          },
          axisTick: {
            show: false, //隐藏X轴刻度
            lineStyle: {
              color: '#fff'
            }
          },
          splitLine: {     //网格线
            show: false,
            lineStyle: {
              color: '#fff'
            }
          },
          axisLine: {
              // 轴线
            show: true,
            lineStyle: {
              color: '#1c80b0'
            }
          },
          data: ["实用新型", "外观设计", "版权其他著作权"],
          type: "category"
        },
        yAxis: {
          axisLine: {
            show: false, //隐藏X轴轴线
            lineStyle: {
              color: '#fff'
            }
          },
          axisTick: {
            show: false, //隐藏X轴刻度
            lineStyle: {
              color: '#fff'
            }
          },
          axisLabel: {
            show: true,
            lineStyle: {
              color: '#fff'
            },
            textStyle: {
              color: '#fff'
            }
          },
          splitLine: { //网格线
            show: true,
            lineStyle: {
              color: '#095ca8'
            }
          }
        },
        series: [
          {
            name: '申请数',
            data: [985, 609, 588],
            "type": "bar",
            "barMaxWidth": "auto",
            // "barWidth": 7,
            "barWidth": 12,
            "itemStyle": {
              barBorderRadius: [7, 7, 0, 0], // 圆角（左上、右上、右下、左下）
              "color": {
                "x": 0,
                "y": 0,
                "x2": 0,
                "y2": 1,
                "type": "linear",
                "global": false,
                "colorStops": [{
                  "offset": 0,
                  "color": "#ffc053"
                }, {
                  "offset": 1,
                  "color": "#ff9646"
                }]
              }
            },
            "label": {
              "show": false,
              "position": "top",
              "distance": 10,
              "color": "#fff",
              "fontSize":13
            }
          },
          {
            name: '授权数',
            data: [867, 565, 581],
            "type": "bar",
            "barMaxWidth": "auto",
            // "barWidth": 7,
            "barWidth": 12,
            "itemStyle": {
              barBorderRadius: [7, 7, 0, 0], // 圆角（左上、右上、右下、左下）
              "color": {
                "x": 0,
                "y": 0,
                "x2": 0,
                "y2": 1,
                "type": "linear",
                "global": false,
                "colorStops": [{
                  "offset": 0,
                  "color": "#54adff"
                }, {
                  "offset": 1,
                  "color": "#81e7ff"
                }]
              }
            },
            "label": {
              "show": false,
              "position": "top",
              "distance": 10,
              "color": "#fff",
              "fontSize":13
            }
          },
        ],
      }
      option && myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    //学术资源统计
    resourceEcharsInit(){
      const myChart = this.$echarts.init(document.getElementById("resourceEchars"));
      let option;
      option = {
        color: [ '#00a0f4', '#00a0f4','#ffba52'],
        tooltip: {
            //鼠标悬浮提示
            trigger: 'item',
            axisPointer: {
              type: 'shadow'
            },
            // formatter: '{b}:{c}', //显示的内容
            backgroundColor: 'rgba(21, 45, 85, 0.6)', //背景颜色（此时为默认色）
            textStyle: {
              color: '#fff'
            }
        },
        grid: {
            //图例位置
            left: '5%',
            right: '5%',
            top: '15%',
            bottom: '5%',
            containLabel: true
        },
        xAxis: [
            {
              type: 'category',
              data: ['完成项目数','产业化项目数', '产业化成功数'],
              axisTick: {
                  alignWithLabel: false
              },
              axisLine: {
                show: true,  //隐藏y轴
                lineStyle: {
                  color: '#fff'
                }
              },
              axisTick: {
                  show: false //刻度线
              },
              // x轴的字体样式
              axisLabel: {
                  show: true,
                  margin: 14, //边距
                  textStyle: {
                    color: '#fff',
                    fontSize: '12',
                    fontWeight: '400',
                    fontFamily: 'Microsoft YaHei'
                  },
                  interval: 0 //x轴文字不隐藏
              }
            }
        ],
        yAxis: {
          splitLine: {
            show: false,
            lineStyle: {
                color: '#979797',
                type: [10, 15],
                dashOffset: 0
            },
          },
          axisLabel: {
            textStyle: {
                color: '#Fff',  //更改坐标轴文字颜色
                fontSize: 12     //更改坐标轴文字大小
            }
          },
          axisLine: {
            show: true,  //隐藏y轴
            lineStyle: {
              color: '#fff'
            }
          },
          axisTick: {
              show: false //刻度线
          },
        },
        series: [
            {
              name: '',
              type: 'pictorialBar', //pictorialBar 象形柱图
              symbolSize: [30, 10], //调整截面形状
              symbolOffset: [0, 0],
              z: 12,
              itemStyle: {
                  normal: {
                    color: function (params) {
                        let barTopColor = ['rgba(0, 160, 244, .5)', 'rgba(0, 160, 244, 1)', 'rgba(255, 186,82, 1)']
                        return barTopColor[params.dataIndex];
                    },
                  },
              },
              // 实现数字展示在柱状图
              label: {
                  show: true,
                  position: 'top',
                  fontSize: 12,
                  color: '#F5F5F5',
                  fontWeight: 'bold',
                  offset: [0, 0],
                  formatter: '{c}' //添加单位
              },
              data: [626, 400, 1114]
            },
            {
              name: '',
              type: 'bar', //bar 柱状图
              barWidth: 30,
              barGap: '0%',
              itemStyle: {
                  normal: {
                    color: function (params) {
                        let barMidColor = ['rgba(0, 160, 244, 1)', 'rgba(0, 160, 244, 1)', 'rgba(255, 186,82, 1)']
                        return barMidColor[params.dataIndex];
                    },
                  },
              },
              data: [626, 400, 1114]
            },
            {
              name: '',
              type: 'pictorialBar', //pictorialBar 象形柱图
              symbolSize: [30, 10], //调整截面形状
              symbolOffset: [0, -5],
              z: 12,
              symbolPosition: 'end', //图形的位置 'start'：图形边缘与柱子开始的地方内切。'end'：图形边缘与柱子结束的地方内切。'center'：图形在柱子里居中。
              itemStyle: {
                  normal: {
                    color: function (params) {
                        let barBottomColor = ['rgba(0, 160, 244, 1)', 'rgba(0, 160, 244, 1)', 'rgba(255, 186,82, 1)']
                        return barBottomColor[params.dataIndex];
                    },
                  },
              },
              data: [626, 400, 1114]
            }
        ]
      };
      option && myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    //返回
    onrouter(){
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="scss" scoped>
  .big-screen-bg{
    width: 100%;
    height: 100vh;
    background: url(../../assets/images/screen/bg.jpg) no-repeat;
    background-size:100% 100%;
    position: relative;
    .top-bg{
      background: url(../../assets/images/screen/screen_top.png) no-repeat top center;
      background-size: cover;
      width: 100%;
      height: 10vh;
      h2{
        line-height: 10vh;
        text-align: center;
        font-size: 35px;
        color: #fff;
        cursor: pointer;
      }
    }
    .map-box{
      display: flex;
      padding: 10px 50px 0;
      .title{
        width: 100%;
        height: 5vh;
        background: url(../../assets/images/screen/title.png) no-repeat;
        background-size: 100% 100%;
        margin-bottom: 10px;
        h2{
          font-size: 16px;
          color: #fff;
          font-weight: bold;
          padding-left: 50px;
          padding-top: 4px;
        }
      }
      .border{
        border:solid 1px #0a1d62;
        position: relative;
        background:rgba($color: #061830, $alpha: .3);
        .top_left{
          position: absolute;
          left:0;top:0;
          width: 13px;
          height: 13px;
          border-top:solid 2px #30ccff;
          border-left:solid 2px #30ccff;
        }
        .top_right{
          position: absolute;
          right:0;top:0;
          width: 13px;
          height: 13px;
          border-top:solid 2px #30ccff;
          border-right:solid 2px #30ccff;
        }
        .bottom_left{
          position: absolute;
          left:0;bottom:0;
          width: 13px;
          height: 13px;
          border-bottom:solid 2px #30ccff;
          border-left:solid 2px #30ccff;
        }
        .bottom_right{
          position: absolute;
          right:0;bottom:0;
          width: 13px;
          height: 13px;
          border-bottom:solid 2px #30ccff;
          border-right:solid 2px #30ccff;
        }
      }
      .map_left{
        width: 25%;
        .ranking_box{
          width: 100%;
          .ranking_list{
            width: 100%;
            height: 21vh;
            overflow: hidden;
            ul{
              padding:20px 30px;
              li{
                display: flex;
                justify-content: center;
                color: #fff;
                font-size: 18px;
                line-height: 20px;
                margin-bottom: 21px;
                b{
                  font-size: 14px;
                  width: 10%;
                }
                h6{
                  width: 20%;
                }
                p{
                  background: #072969;
                  width: 80%;
                  height: 10px;
                  position: relative;
                  border-radius: 5px;
                  span{
                    position: absolute;
                    background: #3696fc;
                    border-radius: 5px;
                    height: 10px;
                  }
                }
                code{
                  width: 20%;
                  text-align: right;
                }
              }
            }
          }
          .patent{
            width: 100%;
            height: 22vh;
            .patentEcharts{
              // background: url(../../assets/images/screen/left_kb_01.png) no-repeat;
              // background-size: 100% 100%;
              width: 100%;
              height: 100%;
            }
          }
          .design_box{
            width: 100%;
            height: 23vh;
            .designEcharts{
              // background: url(../../assets/images/screen/left_kb_02.png) no-repeat center;
              // background-size: 86% 100%;
              width: 100%;
              height: 100%;
            }
          }
        }
      }
      .map_center{
        width: 50%;
        // background: url(../../assets/images/screen/map.png) no-repeat center;
        // background-size: 70% 90%;
        height: 85vh;
      }
      .map_right{
        width:25%;
        .enterprise{
          width: 100%;
          height: 22vh;
          .enterpriseEchars{
            width: 100%;
            height: 100%;
            // background: url(../../assets/images/screen/right_kb_01.png) no-repeat center;
            // background-size:90% 100%;
          }
          .awardsEchars{
            width: 100%;
            height: 100%;
            // background: url(../../assets/images/screen/right_kb_02.png) no-repeat center;
            // background-size:90% 100%;
          }
          .resourceEchars{
            width: 100%;
            height: 100%;
            // background: url(../../assets/images/screen/right_kb_03.png) no-repeat center;
            // background-size:90% 100%;
          }
        }
      }
    }
    .map_bottom{
      background: url(../../assets/images/screen/map_bottom.png) no-repeat bottom center;
      width: 100%;
      height: 43px;
      position: absolute;
      bottom:0;
      left: 0;
    }
  }
</style>